<template>
  <div class="search_list_item">
    <ul>
      <li class="search_li_wrap" v-for="(item, index) in dataSource" :key="index">
        <el-row type="flex" align="middle">
          <el-radio
            v-model="radioValue"
            :label="index"
            @change="(val) => { handleChooseCategory(val, item) }"
          >
            <span>{{ getCategoryNamesAndPath(item) }}</span>
          </el-radio>
        </el-row>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    dataSource: {
      type: Array,
      default () { return []; }
    }
  },
  data () {
    return {
      radioValue: -1
    }
  },
  methods: {
    // 重置单选状态值
    resetRadioValue () {
      this.radioValue = -1;
    },
    // 单选品类
    handleChooseCategory (val, item) {
      this.$emit('getSelectCategory', item);
    },
    // 获取品类名称和路径
    getCategoryNamesAndPath (item) {
      // \xa0 空格
      return `${item.fullNames}\xa0\xa0${item.fullCateNos}`;
    }
  }
}
</script>
<style lang="less" scoped>
ul {
    border: 1px solid #ebeef5;
    padding-left: 5px;
    list-style: none;
    overflow-y: auto;
    li {
      line-height: 24px;
      &:first-child {
        margin-top: 10px;
      }
      &:last-child {
        margin-bottom: 10px;
      }
    }
  }
.search_list_item {
  width: 550px;
  overflow-x: auto;
  .search_li_wrap {
    margin: 10px 0;
  }
}
</style>
